<template>
	<view class="conter">
		<!-- 倒计时 -->
		<view class="time">
			<view v-if="status == 0">
				<view style="color: #46a6f8">
					<u-icon style="position: absolute; margin-left: 280rpx" name="clock-fill" color="#46a6f8" size="18"></u-icon>
					<view class="">
						等待付款
					</view>
				</view>
				<view style="margin-top: 18rpx">
					<u-count-down @finish="onend" :time="timeOutSeconds" format="HH:mm:ss"></u-count-down>
				</view>
			</view>
			<view style="color: #46a6f8" v-if="status == 2">订单已经取消</view>
			<view style="color: #46a6f8" v-if="status == 1">订单支付成功</view>
		</view>
		<!-- 倒计时 -->
		<!-- 编号 名称-->
		<view class="name_number">
			<view class="image_box">
				<!-- 背景图 -->
				<image :src="imgUrl + collectDetail.baseImg" mode=""></image>
			</view>
			<view class="size_up">
				<view style="color: #ffffff">{{ name }}</view>
				<view style="color: #8a92a3; margin-top: 15.7rpx">#{{ collectDetail.bbmonId }}</view>
			</view>
			<view class="baby_right" @click="goMarket">
				<u-icon name="arrow-right" color="#ffffff" size="14"></u-icon>
			</view>
		</view>
		<!-- 编号 名称-->
		<!-- 详情 -->
		<view class="details">
			<view style="color: #ffffff">订单详情</view>
			<view class="max_box">
				<view style="display: flex; margin-top: 30rpx">
					<view class="">订单金额：</view>
					<view style="color: #ffffff; margin-top: 5rpx">{{ collectDetail.money }}.00</view>
				</view>
				<view style="display: flex; margin-top: 15rpx">
					<view class="">订单号：</view>
					<view style="width: 280rpx; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 5rpx">
						{{ collectDetail.paySerialNumber }}
					</view>
					<image @click="clickCopy" class="copy" :src="imgUrl+'/static/images/iconimgpopoak47.png'" alt="" srcset=""></image>
				</view>
				<!-- 	<view style="display: flex; margin-top: 15rpx">
					<view class="">创建时间：</view>
					<view style="color: #ffffff; margin-top: 5rpx">2023-8-21 01:03:31</view>
				</view> -->
			</view>
		</view>
		<!-- 详情 -->
		<!-- 说明 -->
		<view class="description">
			<view class="">说明：</view>
			<view style="margin-top: 17.44rpx">一、在账号有待支付订单时，不允许购买其他藏品。</view>
			<view style="margin-top: 8.72rpx">二、同一账号一段时间内累计取消3次订单，将会被限购一段时间。</view>
		</view>
		<!-- 说明 -->
		<!-- 底部购买 -->
		<view class="snapped_up">
			<view class="Cancel_button" v-if="status == 0" @click="showClear = true">取消订单</view>
			<view class="purchase_button" v-if="status == 0" @click="gopay">去支付</view>
			<view class="Cancel_button" @click="gobuy" v-if="status != 0">继续购买</view>
			<view class="purchase_button" @click="gocollect" v-if="status != 0">藏馆</view>
		</view>
		<!-- 底部购买 -->
		<!-- 弹框 -->
		<u-popup bgColor="transparent" :show="showClear" :round="26" mode="center">
			<view class="close">
				<view class="clmon">取消订单</view>
				<view class="clmonss">是否确认取消订单</view>
				<view class="clpmklj">
					<button v-on:click="showClear = false">取消</button>
					<button @click="configCancel">确定</button>
				</view>
			</view>
		</u-popup>
		<!-- 弹框 -->
	</view>
</template>
<script>
import config from '@/config.js';
import { getOrderDetail, getOrderCancel } from '@/api/starting/index.js';
export default {
	data() {
		return {
			imgUrl: config.imgUrl,
			payUrl: '',
			id: '',
			petId: '',
			status: '',
			name: '',
			timeOutSeconds: 0,
			collectDetail: {},
			showClear: false
		};
	},
	onLoad(option) {
		this.payUrl = option.payUrl;
		this.name = option.name;
		this.id = option.id;
		this.petId = option.petId;
	},
	created() {
		this.getOrderDetails();
	},
	methods: {
		// 获取订单详情
		async getOrderDetails() {
			let param = {};
			param.id = this.id;
			const data = await getOrderDetail(param);
			console.log(data);
			if (data.code == 200) {
				this.collectDetail = data.data;
				this.status = data.data.status;
				const startDate = new Date();
				const endDate = new Date(data.data.expireTime);
				const timeDiff = endDate.getTime() - startDate.getTime(); // 计算时间差
				this.timeOutSeconds = Math.floor(timeDiff); // 舍去小数部分，获取整数秒数
				// console.log(this.timeOutSeconds,'时间戳');
			}
		},
		// 去支付
		async gopay() {
			uni.redirectTo({
				url: '/pages/webView/webView?toUrl=' + this.payUrl + '&payFlag=' + '0' + '&orderId=' + this.collectDetail.paySerialNumber + '&id=' + this.id
			});
		},
		// 确认取消订单
		async configCancel() {
			let param = {};
			param.id = this.id;
			this.status = 2;
			const data = await getOrderCancel(param);
			this.showClear = false;
		},

		// 去购买
		gobuy() {
			uni.switchTab({
				url: '/pages/work/index'
			});
		},
		// 去藏馆
		gocollect() {
			uni.switchTab({
				url: '/pages/work/message'
			});
		},
		// 结束事件
		onend() {
			this.status = 2;
		},
		// 去市场
		goMarket() {
			uni.switchTab({
				url: '/pages/work/market'
			});
		},
		// 复制
		clickCopy() {
			uni.setClipboardData({
				data: this.collectDetail.paySerialNumber, // Order number to copy
				success: () => {
					uni.showToast({
						title: '订单号已复制',
						icon: 'success'
					});
				},
				fail: () => {
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-count-down__text {
	color: red !important;
}
// 整体
.conter {
	width: 100%;
	// 倒计时
	.time {
		text-align: center;
	}
	// 倒计时
	// 编号
	.name_number {
		width: 680rpx;
		height: 181rpx;
		background: #130f26;
		border-radius: 14rpx;
		display: flex;
		margin: 34.88rpx 34.88rpx;
		padding: 34.88rpx;
		position: relative;

		.image_box {
			image {
				width: 112rpx;
				height: 112rpx;
				box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 14rpx;
				background-size: cover;
			}
		}

		.size_up {
			font-size: 28rpx;
			font-family: 'font';
			font-weight: 700;
			margin: 20rpx 34.88rpx;
		}

		.baby_right {
			position: absolute;
			right: 34.88rpx;
			top: 78rpx;
		}
	}

	// 编号
	// 详情
	.details {
		width: 680rpx;
		// height: 272rpx;
		background: #130f26;
		border-radius: 14rpx;
		margin: 34.88rpx 34.88rpx;
		padding: 26.46rpx 17.44rpx;
		font-size: 28rpx;
		font-family: 'font';
		font-weight: 500;
		color: #8a92a3;

		.max_box {
			margin-top: 29.65rpx;
			.copy {
				width: 26rpx;
				height: 26rpx;
				margin-top: 8rpx;
				margin-left: 210rpx;
			}
		}
	}

	// 详情
	// description
	.description {
		font-size: 21rpx;
		color: #8a92a3;
		margin: 87.21rpx 69.77rpx 0;
	}

	// description
	// 底部购买
	.snapped_up {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 155rpx;
		background: #130f26;
		position: fixed;
		bottom: 0;
		padding: 26.46rpx 34.88rpx;
		font-size: 28rpx;
		font-family: 'font';
		font-weight: 700;
		color: #ffffff;

		.Cancel_button {
			width: 209rpx;
			height: 77rpx;
			background: #211f30;
			border-radius: 14rpx;
			border: 2rpx solid #3c424d;
			text-align: center;
			line-height: 77rpx;
		}

		.purchase_button {
			width: 436rpx;
			height: 77rpx;
			background: #46a6f8;
			box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 14rpx;
			line-height: 80rpx;
			text-align: center;
		}
	}

	// 底部购买
	// 弹框
	.close {
		width: 500rpx;
		height: 350rpx;
		background: #0d0e11;
		box-shadow: 0rpx 9rpx 26rpx 0rpx rgba(0, 0, 0, 0.35);
		border-radius: 26rpx;
		opacity: 1;
		border: 2rpx solid #8a92a3;
		.clmon {
			font-size: 40rpx;
			font-family: 'font';
			font-weight: 800;
			color: #ffffff;
			text-align: center;
			margin: 52.33rpx 0;
		}

		.clmonss {
			font-size: 28rpx;
			font-family: 'font';
			font-weight: 400;
			color: #8a92a3;
			text-align: center;
		}
		.clpmklj {
			display: flex;
			margin: 40rpx 0;
			button:nth-child(2) {
				width: 180rpx;
				height: 78rpx;
				background: linear-gradient(90deg, #3adfeb 0%, #4463ff 100%);
				border-radius: 16rpx;
				font-size: 31rpx;
				font-family: 'font';
				font-weight: 800;
				color: #ffffff;
				line-height: 85rpx;
			}

			button:nth-child(1) {
				width: 180rpx;
				height: 78rpx;
				background: gray;
				border-radius: 16rpx;
				font-size: 31rpx;
				font-family: 'font';
				font-weight: 800;
				color: #ffffff;
				line-height: 85rpx;
			}
		}
	}
	// 弹框
}

// 整体
</style>
